<!-- 文章列表 -->
<template>
    <div class="list-container" ref="timelineRef">
        <el-timeline class="timeline-container">
            <el-timeline-item :timestamp="year" placement="top" v-for="year in descSortList" :key="year">
                <el-row class="main">
                    <template v-for="(item, subYear) in fileList" >
                        <template v-if="subYear == year">
                            <!-- xs、sm、md、lg 、xl -->
                            <el-col 
                            :sm="24" :md="12" :lg="12" 
                            class="main-item" 
                            v-show="!noneDataLock" 
                            v-for="subItem in item" :key="subItem.id"
                            @click="goDetails(subItem)">
                                <div class="main-card">
                                    <!-- 封面 -->
                                    <div class="content-image" v-if="subItem.articleCover">
                                        <el-image class="el-image" :src="subItem.articleCover" fit="cover"></el-image>
                                    </div>
                                    <!-- 内容 -->
                                    <div class="content">
                                        <!-- 标题 -->
                                        <p>{{ subItem.articleTitle }}</p>
                                        <!-- 信息 -->
                                        <div class="content-info" :class="screenTypeClass.info">
                                            <!-- 标签 -->
                                            <ArticleTag 
                                            :tags="subItem.tags" 
                                            :tagLength="1"></ArticleTag>
                                            <!-- 时间 -->
                                            <div class="main-time">
                                                <svgIcon iconName="icon-shijian"/>
                                                <span>{{ formatTimeToDate(subItem.createdAt) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </template>
                    </template>
                </el-row>
            </el-timeline-item>
        </el-timeline>
        <!-- 分页 -->
        <Pagination
        :currentPage="offset" 
        :pageSize="limit"
        :count="count"
        :isShow="isShow"
        @currentChange="currentChange"></Pagination>
        <!-- 评论留言 -->
        <Comment 
        :commentTitle="'留言'" 
        :commentType="COMMENTS_TYPE.LIST.value"
        @commentSubmit="getCommentList">
        </Comment>
        <!-- 评论列表 -->
        <CommentList
        :commentList="messageList"
        :commentType="COMMENTS_TYPE.LIST.value"
        :isShow="commentisShow"
        @commentSubmit="getCommentList"></CommentList>
    </div>
</template>

<script setup>
import { computed, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import ArticleTag from '@/components/article/article-tag/article-tag.vue';
import Pagination from '@/components/system/pagination/pagination.vue';

import { commentApi } from '@/api/article/comment-api';
import { COMMENTS_TYPE } from '@/constants/system/user-const';
import { formatTimeToYear, formatTimeToDate } from '@/utils/date-util';
import { goAnchor } from '@/utils/tools-util';
import { ARTICLE_STATUS } from '@/constants/system/article';

import { storeToRefs } from 'pinia';
import { articleStore } from '@/store/article/article';
import { websiteStore } from '@/store/system/website';
const { screenType } = storeToRefs(websiteStore());

// ========================= 实列挂载之前调用 =========================
// 数据初始化
onBeforeMount(() => {
    getAllArticle();
    getCommentList();
});

// ========================= 计算属性 =========================
const fileList = computed(() => {
    const grouped = {};
    articleList.value.forEach((item) => {
        let year = formatTimeToYear(item.createdAt);
        if(!grouped[year]) {
            grouped[year] = [];
        };
        grouped[year].push(item)
    })
    return grouped;
});

const descSortList = computed(() => {
    return Object.keys(fileList.value).sort((a,b) => b-a)
})
// 移动端适配
const screenTypeClass = computed(() => {
    return {
        info: `info-${screenType.value}`,
    }
});

// ========================= 获取数据 =========================
const { getArticleInfo } = articleStore();
const articleList = ref([]);
let offset = ref(1);
let limit = ref(20);
let count = ref(0);
let isShow = ref(false);
let noneDataLock = ref(false);  // 等数据加载完，再渲染组件
async function getAllArticle(cb) {
    let conditions = {
        params: {
            status: ARTICLE_STATUS.RELEASE_STATE.value,
            articleTitle:'',
        },
        offset: offset.value,
        limit: limit.value,
        sort: {
            prop:'createdAt',
            order:'desc',
        }
    };
    noneDataLock.value = true;
    const data = await getArticleInfo(conditions);
    articleList.value = data.data;
    isShow = !!data.data.length;
    count.value = data.count;
    noneDataLock.value = false;
    cb&&cb();
};

// 分页
const timelineRef = ref();
function currentChange(value) {
    console.log(value)
    offset.value = value;
    getAllArticle(() => {
        goAnchor(timelineRef.value, 500);
    });
};

// ========================= 获取评论列表 =========================
const messageList = ref([]);
let commentisShow = ref(false);
async function getCommentList() {
    let conditions = {
        params: {
            type: COMMENTS_TYPE.LIST.value
        },
        order: [['createdAt', 'asc']]
    };
    const res = await commentApi.list(conditions);
    messageList.value = res.data.data;
    commentisShow = !!res.data.data.length;
};

// ========================= 路由操作 =========================
const router = useRouter(); // 路由
function goDetails(item) {
    router.push({
        path: '/article/detail',
        query: {
            id: item.id
        }
    })
};
</script>

<style scoped lang="scss">
    @import '@/theme/public.scss';
    @import '@/theme/animations.scss';
    @import './article-list.scss';
</style>